<template>
  <div>
    <div style="height:130px"/>
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert" > {{alertText}}</alert>
    </div>
    <div  class="charts" style="border:1px solid #C0C0C0" v-show="isShowCharts">
      <v-chart :data="data1" prevent-default>
      <v-scale x :tick-count="3" />
      <v-tooltip :show-item-marker="false" show-x-value />
      <v-line />
    </v-chart>
    </div>
    <div class="charts" style="border:1px solid #C0C0C0">
      <v-chart :data="data2">
      <v-scale y :options="yOptions" />
      <v-tooltip disabled />
      <v-pie :radius="0.85" series-field="name" />
      <v-legend :options="legendOptions" />
      </v-chart>
    </div>
  </div>
</template>

<script>
import { XHeader, XInput, Group, Calendar, PopupPicker, PopupRadio } from 'vux'
import { VChart, VLine, VArea, VTooltip, VLegend, VBar, VPie, VScale } from 'vux'
import {mapState, mapActions} from 'Vuex'
import report from 'api/report'

const map = {
  '芳华': '40%',
  '妖猫传': '20%',
  '机器之血': '18%',
  '心理罪': '15%',
  '寻梦环游记': '5%',
  '其他': '2%'
}

export default {
  name: 'U_summary_visual',
  data () {
    return {
      isShowAlert: false,
      alertText: '',
      isShowCharts: true,
      data1: [
        { date: '2017-07-09', value: 6.6 },
      ],
      legendOptions: {
        position: 'right',
        itemFormatter (val) {
          return val + '  ' + map[val]
        }
      },
      yOptions: {
        formatter (val) {
          return val * 100 + '%'
        }
      },
      map,
      data2: [
        { name: '芳华', percent: 0.4, a: '1' },
        { name: '妖猫传', percent: 0.2, a: '1' },
        { name: '机器之血', percent: 0.18, a: '1' },
        { name: '心理罪', percent: 0.15, a: '1' },
        { name: '寻梦环游记', percent: 0.05, a: '1' },
        { name: '其他', percent: 0.02, a: '1' }
      ]
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      dateOfToday: state => state.util.dateOfToday,
    }),
  },
  mounted () {
    this.setDateOfToday()
  },
  watch: {
  },
  components: {
    XHeader,
    XInput,
    Group,
    Calendar,
    PopupPicker,
    PopupRadio,
    VChart,
    VTooltip,
    VLine,
    VScale,
    VArea,
    VBar,
    VPie,
    VLegend,
  },
  methods: {
    ...mapActions('util', [
      'setDateOfToday'
    ]),
    back () {
      this.$router.go(-1)
    },
    showAlert (alertText) {
      this.isShowAlert = true
      this.alertText = alertText
    },
    closeTip () {
      this.isShowAlert = false
      this.alertText = ''
    },
  }
}
</script>
<style lang="less">
.weui-cells_radio{
  height:250px
}
.weui-cells_radio .weui-cell__bd p{
  margin:5px;
}
</style>
